<template>
  <div class="left-points column no-wrap bg-white-6 text-grey-9 q-pa-xs relative-position">
    <div class="full-width q-pl-sm text-grey-6 text-caption">
      <qx-tooltip>{{ $t('MapCore.LeftPointsTip1') }}</qx-tooltip>
    </div>
    <div class="q-pl-sm text-grey-6 text-caption">
      <qx-tooltip>{{ $t('MapCore.LeftPointsTip2') }}</qx-tooltip>
    </div>
    <div class="q-pa-sm filter-input-cls">
      <q-input v-model="filterText" :placeholder="$t('FilterKeywords')" dense outlined>
        <template v-slot:append>
          <q-icon name="search"></q-icon>
        </template>
      </q-input>
    </div>
    <template v-if="filterPoints.length">
      <q-tabs v-model="tabInfo" active-color="primary" align="justify" breakpoint="0" class="map-points-tabs" dense
              inline-label>
        <q-tab v-for="kind in formatKinds" :key="kind.id" :label="kind[toI18nName('elementCategoryNameZhCn')]"
               :name="kind.elementCategoryCode" class="q-px-xs rounded-borders" />
      </q-tabs>
      <q-tab-panels v-model="tabInfo" animated class="map-points-panels col q-mt-xs bg-transparent">
        <q-tab-panel v-for="kind in formatKinds" :key="kind.id" :name="kind.elementCategoryCode"
                     class="no-padding overflow-auto">
          <div class="point-list-box overflow-hidden-x overflow-auto-y row q-col-gutter-xs">
            <template v-for="type in formatTypes(kind.elementCategoryCode)" :key="type.id">
              <q-expansion-item :label="type[toI18nName('categoryDataNameZhCn')]" class="full-width" default-opened
                                expand-icon-class="text-grey-6 no-padding"
                                header-class="rounded-borders q-pa-xs q-mb-xs">
                <div class="row q-col-gutter-xs">
                  <div v-for="point in formatPoints( '', type.categoryDataCode)" :key="point.id" class="col-4"
                       @contextmenu="handleClick($event, point)">
                    <div :class="activeCls(point)"
                         class="point-box-cls bg-grey-2 relative-position rounded-borders cursor-pointer q-pa-xs text-center"
                         @click.stop="togglePoint(point)" @dblclick.stop="togglePointDbl(point)">
                      <q-img :src="formatPath(point.positionImageUrl)"
                             error-src="src/views/MapCore/MapGlobal/assets/LoadFail.png" fit="contain" height="1.25rem"
                             spinner-color="white" spinner-size="1.25rem" width="1.25rem"></q-img>
                      <qx-tooltip class="point-name-cls text-bold">{{ point.positionPackageName }}</qx-tooltip>
                    </div>
                  </div>
                </div>
              </q-expansion-item>
            </template>
            <div v-for="point in formatPoints(kind.elementCategoryCode, '')" :key="point.id" class="col-4"
                 @contextmenu="handleClick($event, point)">
              <div :class="activeCls(point)"
                   class="point-box-cls bg-grey-2 relative-position rounded-borders cursor-pointer q-pa-xs text-center"
                   @click.stop="togglePoint(point)" @dblclick.stop="togglePointDbl(point)">
                <q-img :src="formatPath(point.positionImageUrl)"
                       error-src="src/views/MapCore/MapGlobal/assets/LoadFail.png" fit="contain" height="1.25rem"
                       spinner-color="white" spinner-size="1.25rem" width="1.25rem"></q-img>
                <qx-tooltip class="point-name-cls text-bold">{{ point.positionPackageName }}</qx-tooltip>
              </div>
            </div>
          </div>
        </q-tab-panel>
      </q-tab-panels>
    </template>
    <MEmpty v-else></MEmpty>
  </div>
  <AddDotMatrix v-model="modalVisible" :pointInfo="clickPoint"></AddDotMatrix>
</template>

<script setup>
import { toI18nName } from 'boot/i18n'
import {
  currentAction, setCurrentAction, setDrawPoint, setIsContinuousDot
} from 'src/views/MapCore/MapGlobal/utils/KonvaEvent'
import { packagePoints } from 'src/views/MapCore/MapGlobal/utils/PackagePoints'
import { userStores } from 'stores/user-stores'
import AddDotMatrix from './AddDotMatrix.vue'
import { computed, ref, watch } from 'vue'

const props = defineProps({ kinds: Array, types: Array })
const userStore = userStores()

const tabInfo = ref('')
const filterText = ref('')
const clickPoint = ref({})
const modalVisible = ref(false)

const filterPoints = computed(() => {
  if (!filterText.value) return packagePoints.value
  return packagePoints.value.filter(
    point => (point.positionPackageName || '').toUpperCase().includes(filterText.value.toUpperCase()))
})
const formatKinds = computed(() => {
  const { kinds = [] } = props
  return kinds.filter(
    point => filterPoints.value.some(p => p.positionElementCategoryCode === point.elementCategoryCode))
})
const formatTypes = computed(() => kind => {
  const { types = [] } = props
  return types.filter(type => type.categoryCode === kind)
})
const formatPoints = computed(() => (kind, type) => {
  if (type) return filterPoints.value.filter(point => point.positionElementCategoryInfoCode === type)
  return filterPoints.value.filter(
    point => point.positionElementCategoryCode === kind && !point.positionElementCategoryInfoCode)
})
const formatPath = computed(() => path => `${userStore.OSSPath}/${path}`)
watch(formatKinds, kinds => {
  if (kinds.length) tabInfo.value = kinds[0].elementCategoryCode
}, { immediate: true })

const activeCls = computed(() => point => {
  if (currentAction.value !== 'point') return ''
  return point?.positionPackageCode === clickPoint.value.positionPackageCode ? 'active-cls' : ''
})

const togglePoint = point => {
  setDrawPoint(point.positionPackageCode)
  clickPoint.value = point
  setIsContinuousDot(false)
  setCurrentAction('point')
}

const togglePointDbl = point => {
  setDrawPoint(point.positionPackageCode)
  clickPoint.value = point
  setIsContinuousDot(true)
  setCurrentAction('point')
}

const handleClick = (e, point) => {
  e.preventDefault()
  clickPoint.value = point
  modalVisible.value = true
}
</script>